<template>
	<view class="Collection">
		<view v-if="isData">
			<view class="makeAppointment_item" @touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd"
				:style="{right:item.left + 'rpx'}" v-for="(item,index) in dataList" :key="index" :data-index="index">
				<view class="makeAppointment_item_conter">
					<view class="makeAppointment_item_demo">
						<view class="makeAppointment_item_demo_left">
							<view class="image">
								<image :src="$wanlshop.oss(item.goods.image, 88, 88)" mode="aspectFill"></image>
							</view>
							<view class="conter">
								<view class="conter1">{{item.goods.title}}</view>
								<view class="conter2">
									<text>喜欢{{item.goods.like}}</text>
									<text>付款{{item.goods.like}}</text>
								</view>
							</view>
						</view>
						<view class="number"></view>
					</view>
					<view class="price">￥{{item.goods.price}}</view>
				</view>
				<view class="makeAppointment_item_delect" @tap="loadFollow(item.goods_id, index)">删除</view>

			</view>
		</view>
		<view class="Collection_item1" v-else>
			<wanl-empty text="没有发现任何收藏" src="collect_default3x"></wanl-empty>

		</view>

		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import wanlEmpty from '../../../components/wanl-empty/wanl-empty.vue'
	import uniLoadMore from '../../../components/uni-load-more/uni-load-more.vue'
	export default {
		data() {
			return {
				// 侧滑
				leftStyle: 0,
				startX: 0,
				hiddenFlag: true,
				// 向左滑动多少rpx
				delBtnWidth: 150,
				// 数据
				dataList: [],
				isData: true, //判断是否存在数据
				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: ''
				},
			}
		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.loadData();
		},
		components: {
			wanlEmpty,
			uniLoadMore
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		methods: {
			async loadData() {
				this.$api.get({
					url: '/wanlshop/product/collect',
					data: {
						page: this.current_page
					},
					success: res => {
						this.dataList=[];
						uni.stopPullDownRefresh();
						this.dataList = this.reload ? res.data : this.dataList.concat(res.data); //评论数据 追加 
						// this.dataList.forEach(v=>{
						// 	v.left=0
						// })
						console.log('dataList',this.dataList)
						this.isData = this.dataList.length == 0 ? false : true; //判断是否存在数据
						this.total = res.total; //数据量
						this.current_page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
						this.status = res.total == 0 ? 'noMore' : 'more';
						console.log('isData', this.isData)
					}
				});
			},
			async loadFollow(id, index) {
				console.log('id',id)
				this.$api.post({
					url: '/wanlshop/product/follow',
					data: {
						id: id
					},
					success: res => {
						// 从列表删除
						this.$delete(this.dataList, index);
						this.$store.commit('statistics/dynamic', {
							collection: this.$store.state.statistics.dynamic.collection - 1
						});
						
						this.loadData();
					}
				});
			},
			// --------------------------
			// 开始移动时
			drawStart(e){
				console.log('移动',e)
				var touch=e.touches[0];
				this.startX=touch.clientX;
			},
			// 触摸滑动
			drawMove(e){
				// console.log('滑动',e)
				for(var index in this.dataList){
					this.$set(this.dataList[index],'left',0);
				}
				var touch=e.touches[0];
				var item=this.dataList[e.currentTarget.dataset.index];
				var disX=this.startX-touch.clientX;
				if(disX>=20){
					if(disX>this.delBtnWidth){
						disX=this.delBtnWidth;
						}
						this.$set(this.dataList[e.currentTarget.dataset.index],'left',disX);
				}else{
					this.$set(this.dataList[e.currentTarget.dataset.index],'left',0);
				}
			},
			drawEnd(e){
				console.log('停止',e)
				var item=this.dataList[e.currentTarget.dataset.index];
				console.log('item',item)
				if(item.left>=this.delBtnWidth/2){
					this.$set(this.dataList[e.currentTarget.dataset.index],'left',this.delBtnWidth);
				}else{
					this.$set(this.dataList[e.currentTarget.dataset.index],'left',0);
				}
			},
			


		},
		onLoad() {
			// 调用数据
			this.loadData();
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.Collection {
		width: 750rpx;

		view {
			// background-color: pink;


			.makeAppointment_item {
				position: relative;
				background-color: #FFFFFF;
				// border-radius: 10rpx;
				width: 100%;
				margin: 0 auto 15rpx;
				// height: 400rpx;
				// margin-bottom: 15rpx;
				padding: 10rpx;
				box-sizing: border-box;
				height: 200rpx;
				display: flex;
				align-items: right;
				flex-direction: row;
				
				&_conter {
					// border-bottom: 1px solid #d2d2d2;

					padding: 10rpx 20rpx 10rpx;
					width: 700rpx;
					margin: 0 auto;
					background-color: #FFFFFF;
					

					.makeAppointment_item_demo {
						display: flex;
						align-items: center;
						justify-content: space-between;
						background-color:#FFFFFF;


						box-sizing: border-box;

						&_left {
							display: flex;
							// align-items: center;

							.image {
								width: 120rpx;
								height: 120rpx;
								// background-color: #4CD964;

								image {
									width: 120rpx;
									height: 120rpx;
									border-radius: 10rpx;
								}
							}

							.conter {
								font-size: 24rpx;
								color: #282828;
								width: 450rpx;
								// background-color: red;
								margin-left: 15rpx;
								// display: flex;
								// flex-direction: column;
								// justify-content: space-between;

								.conter1 {
									// 多行显示超出部分显示省略号
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									word-break: break-all;
									// background-color: pink;
								}

								.conter2 {
									color: #808080;
									// background-color: red;
								}
							}
						}

						.number {
							font-size: 24rpx;
							color: #282828;
							// background-color: #007AFF;
						}
					}

					.price {
						// background-color: red;
						font-size: 26rpx;
						color: #000000;
						text-align: right;
					}
				}

				&_delect {
					font-size: 28rpx;
					width: 150rpx;
					height: 200rpx;
					background-color: #da2625;
					color: #FFFFFF;
					text-align: center;
					line-height: 200rpx;
					position: absolute;
					-webkit-transform: translateY(-50%);
					transform: translateY(-50%);
					top: 50%;
					right: -150rpx;


				}
			}
		}

		.Collection_item1 {
			// height: 800rpx;
			color: #808080;
			// background-color: pink;
		}
	}
</style>
